<template>
    <div id="index">
        <div class="menu">
            <img class="logo" src="../assets/img/组 4@2x(3).png" alt="logo"/>
            <div class="elmenu">
                <el-menu
                router="true"
                mode="horizontal"
                default-active="/home">
                    <el-menu-item index="/home">首页</el-menu-item>
                    <el-menu-item index="/guide">比赛指南</el-menu-item>
                    <el-menu-item v-if="dsUser == null || dsUser.userType == '1'" index="/application">我要报名</el-menu-item>
                    <el-menu-item v-if="dsUser == null || dsUser.userType == '2'" index="/review">进入专家评审</el-menu-item>
                </el-menu>
            </div>
            <el-button class="btn" v-if="dsUser == null" type="primary" @click="showLogin">登录</el-button>
            <el-dropdown v-else>
                <span class="userImg">
                    <img src="../assets/img/组 1@2x.png" style="width: 2.6vw;height: 2.6vw;" />
                    <span style="margin-left: 0.5vw;">{{ dsUser.nickName }}</span>
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="showUpdatePassword">
                            <img src="../assets/img/矢量智能对象(4).png" style="width: 1.2vw;height: 1.2vw;" />
                            <span style="margin-left: 1vw;">修改密码</span>
                        </el-dropdown-item>
                        <el-dropdown-item @click="loginOut">
                            <img src="../assets/img/矢量智能对象(3).png" style="width: 1.2vw;height: 1.2vw;" />
                            <span style="margin-left: 1vw;">退出登录</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="content">
            <RouterView />
        </div>
        <div class="footer">
            <p>财环电活：王老师 15853217870 &nbsp;|&nbsp; 技术支持：唐工 177065212317 &nbsp;|&nbsp;服务电话：朱老师，15966818040&nbsp;|&nbsp;山东依智技产业开发集团有限公司 @2023 鲁CPi2020045516号-3</p>
            <p>Copyoight &nbsp;©&nbsp; 2003-2023&nbsp; zhihufisoue &nbsp; Allrights &nbsp;reseryed.</p>
        </div>
        <Login />
        <UpdatePassword/>
    </div>
</template>

<script setup lang="ts">
import Login from '../components/Login.vue'
import UpdatePassword from '../components/UpdatePassword.vue'
import { ref, onMounted,onBeforeUpdate} from 'vue'
import {RouterView,useRouter } from 'vue-router'
import {useGlobStore} from '@/stores/useGlobStore'
import { storeToRefs} from 'pinia'


const router = useRouter();
const store = useGlobStore();
const {isResh} = storeToRefs(store);
const dsUser = ref<{ userName: string, password: string,nickName:string,userType:string } | null>(null);

const init = ()=>{
    dsUser.value = JSON.parse(String(localStorage.getItem('dsUser')));
}

const showLogin = ()=>{
    store.setIsLogin(true);
}

//退出登录
const loginOut = ()=> {
  localStorage.removeItem('psptToken');
  localStorage.removeItem('dsUser');
  localStorage.removeItem('globStore');
  store.setIsResh(true);
  router.push("/");
}

const showUpdatePassword = ()=>{
    store.setIsUpdatePassword(true);
}

onMounted(()=>{
    init();
})
onBeforeUpdate(()=>{
    init();
    if(isResh.value)
    {
        router.push("/home");
        store.setIsResh(false);
    }
})
</script>

<style scoped>
#index
{
    max-width: 100%;
    height: auto;
}
.menu
{
    width: 100%;
    height: 61px;
    background-color: rgb(255, 255, 255);
    display: flex;
    border-bottom: 1px solid rgb(174, 173, 173);
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
}
.logo
{
    margin-left: 8vw;
    width: 20vw;
    height: 2.6vw
}
.elmenu
{
    width: 40vw;
    margin-left: 5vw;
}
.btn,.userImg
{
    margin-left: 13vw;
}
.userImg
{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-weight: 600;
}
.content
{
    overflow: auto;
    background-color: rgb(247, 247, 247);
}
.footer
{
    width: 100%;
    height: 6vw;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    padding-top: 0.8vw;
    padding-bottom: 1vw;
}
.footer p
{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
    margin-top: 1.6vw;
}
</style>